<template>
	<div id="header">
		<div class="user-wrap">
			<div class="header-left">
				<h1 class="log" :style="{background:`url(${logImg}) center/cover `}"></h1>
				<h3 class="title1">高校宿舍管理系统</h3>
			</div>

			<div class="info">
				<div>
					<span>欢迎！{{ user }}</span>
				</div>
				<div class="img">
					<el-avatar :size="40" :src="imgUrl" />
				</div>
				<el-col :lg="1" :md="4">
					<div class="out">
						<el-icon :size="25">
							<SwitchButton @click="handleOutSystem" />
						</el-icon>
					</div>
				</el-col>
			</div>
		</div>

		<!-- 退出系统对话框 -->
		<el-dialog v-model="dialogFormVisible" title="退出" width="400" :show-close="false">
			<div class="context">需要退出系统吗？</div>
			<template #footer>
				<div class="dialog-footer">
					<el-button @click="dialogFormVisible = false">取消</el-button>
					<el-button type="primary" @click="handleOutSystemComfrim"> 确认退出 </el-button>
				</div>
			</template>
		</el-dialog>
	</div>
</template>

<script setup>
import { computed, onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores/userStore'

import logImg from "@/assets/img/log.png"

const userStore = useUserStore()
const router = useRouter()
const dialogFormVisible = ref(false)

const imgUrl =ref("https://img1.baidu.com/it/u=731000468,217848770&fm=253&fmt=auto&app=120&f=PNG?w=499&h=261")
const user = computed(() => {
	let limt = Number.parseInt(userStore.limts)
	let userName = ''
	switch (limt) {
		case 0:
			userName = '管理员 ' + userStore.userInfo.manName
			break
		case 1:
			userName = '宿舍管理员 ' + userStore.userInfo?.houName
			break
		case 2:
			userName = '教师 ' + userStore.userInfo?.teaName
			break

		case 3:
			userName = '学生 ' + userStore.userInfo?.stuName
			break
	}
	return userName
})
const handleOutSystem = () => {
	dialogFormVisible.value = true
}
const handleOutSystemComfrim = () => {
	dialogFormVisible.value = false
	localStorage.setItem('token', '')
	localStorage.setItem('user', JSON.stringify({}))
	userStore.userInfo = {}
	router.push('/login')
}
</script>

<style scoped lang="sass">
.log
  width: 60px
  height: 60px
#header
  min-width: 1200px
  height: 100%
 

// 标题样式
.title1
  font-weight: 600
  line-height: 60px
  font-size: 25px
  margin-left: 15px
  color: #f3d19e
.el-col
  flex-direction: row

.user-wrap
  display: flex
  justify-content: space-between
  align-items: center
  height: 100%


  .header-left
    display: flex

  .info
    min-width: 15%
    display: flex
    justify-content: space-between
    align-items: center
    margin-right: 10px
    gap: 0 5px
    .img

      .el-avatar
        vertical-align: -13px
.out
  cursor: pointer
  &:hover
    color: red
</style>
